<script setup lang="ts">
import {useRuleInfoViewStore} from "@/store/views/sys/admin/ruleInfoStore";
import {Perm} from "@/utils/enum-type";
import {openConfirm} from "@/components/MyComponent/XMessageBox";
import {deleteRuleInfoApi} from "@/api/sys/admin/rule-info";

const store = useRuleInfoViewStore()
const {open, getList, title} = store
const {queryData, total, tableData, statusOptions, ruleInfoTypeOptions} = storeToRefs(store)

async function sortTable({prop, order}: {
  prop: string,
  order: 'descending' | 'ascending' | null
}) {
  if (order === 'descending' || !order) {
    queryData.value.order = {[prop]: 'desc'}
  } else {
    queryData.value.order = {[prop]: 'asc'}
  }
  await getList()
}


// 删除按钮
async function openDelete(id: number) {
  if (await openConfirm('确定删除' + title)) {
    await deleteRuleInfoApi(id)
    ElMessage.success('删除成功')
    await getList()
  }
}

watch([() => queryData.value.pageSize, () => queryData.value.currentPage], async () => {
  await getList()
})
// 载入查询
onMounted(async () => {
  await getList()
})
</script>

<template>
  <!--  按钮-->
  <x-card>
    <div class="flex">
      <div v-perm="[Perm.SysRuleInfoAdd]" class="mr-1em">
        <!--    新增按钮-->
        <el-button type="success" @click="open()">
          <i-ep-plus/>
          <span>新增</span>
        </el-button>
      </div>
    </div>
  </x-card>
  <!-- 表格 -->
  <x-card>
    <el-table :data="tableData" style="width: 100%" show-overflow-tooltip @sort-change="sortTable">
      <el-table-column prop="title" label="标题" min-width="130" sortable="custom" fixed/>
      <el-table-column prop="remark" label="描述" min-width="500" :show-overflow-tooltip="false">
        <template #default="{row}">
          <el-input type="textarea" autosize readonly :model-value="row.remark"/>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" min-width="50" align="center"/>
      <el-table-column prop="type" sortable="custom" label="类型" width="80">
        <template #default="{row}">
          <x-tag :value="row.type" :options="ruleInfoTypeOptions"/>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80">
        <template #default="{row}">
          <x-tag :value="row.status" :options="statusOptions"/>
        </template>
      </el-table-column>
      <el-table-column
          v-perm="[[Perm.SysRuleInfoDelete],[Perm.SysRuleInfoEdit]]"
          fixed="right" label="操作" width="200">
        <template #default="{row}">
          <el-button v-perm="Perm.SysRuleInfoEdit" link type="primary" size="small" @click="open(row.id)">
            <i-ep-edit/>
            <span>编辑</span>
          </el-button>
          <el-button v-perm="Perm.SysRuleInfoDelete" link type="danger" size="small" @click="openDelete(row.id)">
            <i-ep-delete/>
            <span>删除</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </x-card>
  <!--  分页-->
  <x-card body-style="padding:0.75em;padding-right:2em">
    <XPagination
        v-model:page-size="queryData.pageSize"
        v-model:current-page="queryData.currentPage"
        v-model:total="total"
    />
  </x-card>
</template>

<style scoped lang="scss">

</style>